使用原生js+css3实现下拉刷新效果

原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。

html布局

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no">
<title>test</title>
<style type="text/css" media="screen">
    body{margin: 0;}
    ul{list-style: none;padding: 0;}
    li{height: 30px;border-bottom: 1px solid #ddd;line-height: 30px;padding-left: 10px;}
    .scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;}
    .scroller{-webkit-overflow-scrolling:touch;}
</style> 
</head> 
<body > 
<div id="container" class="scroller" >
<div class="loading">
   下拉刷新数据
</div>
<ul>
    <li><a href="#">列表数据1</a></li>
    <li><a href="#">列表数据2</a></li>
    <li><a href="#">列表数据3</a></li>
    <li><a href="#">列表数据4</a></li>
    <li><a href="#">列表数据5</a></li>
    <li><a href="#">列表数据6</a></li>
    <li><a href="#">列表数据7</a></li>
    <li><a href="#">列表数据8</a></li>
    <li><a href="#">列表数据9</a></li>
    <li><a href="#">列表数据10</a></li>
    <li><a href="#">列表数据11</a></li>
    <li><a href="#">列表数据12</a></li>
    <li><a href="#">列表数据13</a></li>
    <li><a href="#">列表数据14</a></li>
    <li><a href="#">列表数据15</a></li>
    <li><a href="#">列表数据16</a></li>
    <li><a href="#">列表数据17</a></li>
    <li><a href="#">列表数据18</a></li>
    <li><a href="#">列表数据19</a></li>
    <li><a href="#">列表数据20</a></li>
    <li><a href="#">列表数据21</a></li>
    <li><a href="#">列表数据22</a></li>
    <li><a href="#">列表数据23</a></li>
    <li><a href="#">列表数据24</a></li>
    <li><a href="#">列表数据25</a></li>
    <li><a href="#">列表数据26</a></li>
    <li><a href="#">列表数据27</a></li>
    <li><a href="#">列表数据28</a></li>
    <li><a href="#">列表数据29</a></li>
    <li><a href="#">列表数据30</a></li>
</ul> 
</div>
<body>
</html>

js逻辑

 var slide = function (option) {
    var defaults={
        container:'',
        next:function(){}
    }
    var start,
            end,
            length,
            isLock = false,//是否锁定整个操作
            isCanDo = false,//是否移动滑块
            isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
            hasTouch = 'ontouchstart' in window && !isTouchPad;
    var obj = document.querySelector(option.container);
    var loading=obj.firstElementChild;
    var offset=loading.clientHeight;
    var objparent = obj.parentElement;
    /*操作方法*/
    var fn =
    {
        //移动容器
        translate: function (diff) {
            obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
            obj.style.transform='translate3d(0,'+diff+'px,0)';
        },
        //设置效果时间
        setTransition: function (time) {
            obj.style.webkitTransition='all '+time+'s';
            obj.style.transition='all '+time+'s';
        },
        //返回到初始位置
        back: function () {
            fn.translate(0 - offset);
            //标识操作完成
            isLock = false;
        },
        addEvent:function(element,event_name,event_fn){
            if (element.addEventListener) {
                element.addEventListener(event_name, event_fn, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + event_name, event_fn);
            } else {
                element['on' + event_name] = event_fn;
            }
        }
    };

    fn.translate(0-offset);
    fn.addEvent(obj,'touchstart',start);
    fn.addEvent(obj,'touchmove',move);
    fn.addEvent(obj,'touchend',end);
    fn.addEvent(obj,'mousedown',start)
    fn.addEvent(obj,'mousemove',move)
    fn.addEvent(obj,'mouseup',end)

    //滑动开始
    function start(e) {
        if (objparent.scrollTop <= 0 && !isLock) {
            var even = typeof event == "undefined" ? e : event;
            //标识操作进行中
            isLock = true;
            isCanDo = true;
            //保存当前鼠标Y坐标
            start = hasTouch ? even.touches[0].pageY : even.pageY;
            //消除滑块动画时间
            fn.setTransition(0);
            loading.innerHTML='下拉刷新数据';
        }
        return false;
    }

    //滑动中
    function move(e) {
        if (objparent.scrollTop <= 0 && isCanDo) {
            var even = typeof event == "undefined" ? e : event;
            //保存当前鼠标Y坐标
            end = hasTouch ? even.touches[0].pageY : even.pageY;
            if (start < end) {
                even.preventDefault();
                //消除滑块动画时间
                fn.setTransition(0);
                //移动滑块
                if((end-start-offset)/2<=150) {
                    length=(end - start - offset) / 2;
                    fn.translate(length);
                }
                else {
                    length+=0.3;
                    fn.translate(length);
                }
            }
        }
    }
    //滑动结束
    function end(e) {
        if (isCanDo) {
            isCanDo = false;
            //判断滑动距离是否大于等于指定值
            if (end - start >= offset) {
                //设置滑块回弹时间
                fn.setTransition(1);
                //保留提示部分
                fn.translate(0);
                //执行回调函数
                loading.innerHTML='正在刷新数据';
                if (typeof option.next == "function") {
                    option.next.call(fn, e);
                }
            } else {
                //返回初始状态
                fn.back();
            }
        }
    }
}
slide({container:"#container",next: function (e) {
    //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
    var that = this;
    setTimeout(function () {
        that.back.call();
    }, 2000);
}});

代码不是很多，细节还需完善。此次的学习结果是参考http://www.111cn.net/wy/js-ajax/87990.htm这篇文章完成

使用原生js+css3实现下拉刷新效果

lihualong

引用和评论

D3.js实现拓扑图

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍

startViewTransition的简单示例